<template>
  <list-table @register="register">
    <template #toolbar>
      <el-button type="primary" @click="open = true">新增</el-button>
    </template>
    <template #action>
      <el-space>
        <vxe-button mode="text" status="primary">详情</vxe-button>
        <vxe-button mode="text" status="danger">删除</vxe-button>
      </el-space>
    </template>
  </list-table>

  <el-dialog width="500" v-model="open" title="用户" @ok="handleOk">
    <form-create v-bind="fcOptions" v-model="formData" v-model:api="fApi" />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="open = false">取消</el-button>
        <el-button type="primary" @click="open = false"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" name="TableList" setup>
import { ref } from 'vue';
import { fcOptionsTemp } from './helper';
import api from '@/api';
import { ListTable, useListTable } from '@/components/list-table';

const { register } = useListTable({
  api: async (params) => api.getUsers(params),
  columns: [
    { type: 'seq', fixed: 'left' },
    { field: 'name', title: '姓名', type: 'input' },
    { field: 'age', title: '年龄', type: 'input' },
    { field: 'role', title: '角色', type: 'input' }, //  slots: { default: 'role' }
    { field: 'createTime', title: '创建时间', type: 'input' },
  ],
});

const formData = ref();
const fApi = ref(); //实例对象
const fcOptions = ref(fcOptionsTemp());
const open = ref<boolean>(false);
const handleOk = async () => {
  fApi.value.submit(
    async (formData) => {
      //todo 提交表单
      console.log(formData);
      const res = await api.insertUser(formData);
      console.log(res);
    },
    () => {
      //todo 表单验证未通过
    },
  );
};
</script>
